{% extends "base.html" %}
{% block title %}Settings - Data{% endblock title %}
{% block ngapp %}BaseModule{% endblock ngapp %}


{% block breadcrumb %}
    {% include "settings/_topbar.html" %}
{% endblock breadcrumb %}
{% block main_content_class %}center{% endblock main_content_class %}
{% block content_class %}class="data-rows"{% endblock content_class %}
{% block content %}

<form method="post" action="{% url 'notifications_webhooks' %}">
<div class="settings__content">

<ul class="settings-list-form">
    {{ form.as_ul }}

<li class='buttons'>
    {% csrf_token %}
    <input type="submit" class='button' value="Create" />
    
</li>
</ul>

</div><!-- profile content -->

</form>


{% if webhooks.count > 0 %}
<table class='settings-table'>
    <thead>
        <td>URL</td>
        <td>Secret</td>
        <td ></td>
    </thead>
    {% for r in webhooks %}
    <tr id="row-{{ r|mongo_id }}">
        
        <td><a target='_blank' href="{{ r.url }}">{{ r.url }}</a></td>
        <td>{{ r.secret }}</td>
        <td class='settings-column'>
            <a href="#" class='settings amon' data-dropdown="settings-menu-{{ r|mongo_id }}" data-options="is_hover:true">d</a>
            <ul id='settings-menu-{{ r|mongo_id }}' class="f-dropdown tiny settings-menu" data-dropdown-content>
                <li><a  href="{% url 'edit_webhook' webhook_id=r|mongo_id %}" data-icon="e">Edit</a></li>
                <li><a data-rowid="{{ r|mongo_id }}" class='delete_row' data-icon="b" href="#">Delete</a></li>    
                <li><a  href="{% url 'test_webhook' webhook_id=r|mongo_id %}" data-icon="z">Test</a></li>
            </ul>


        </td>
    </tr>
    <div class="delete-row" id="delete-row-{{ r|mongo_id }}">
            <p>
                Are you sure you want to delete this Webhook ?
            </p>
            <ul>
                <li>
                    <a href="{% url 'delete_webhook' webhook_id=r|mongo_id %}" class="button delete">Delete</a>
                </li>
                <li>
                    <a data-rowid="{{ r|mongo_id }}" href="" class="button cancel">Cancel</a>
                </li>
            </ul>
        </div>
    {% endfor %}
</table>
{% endif %}

</div> <!-- settings_content end -->

{% endblock %}
{% block js %} 
<script type="text/javascript" src='{{ STATIC_URL }}js/libs/backbone-min.js'></script>
<script type="text/javascript" src='{{ STATIC_URL }}js/delete.row.js'></script>
{% endblock %}
